import React, {
  forwardRef,
  useState,
  useImperativeHandle,
  useEffect,
} from "react";
import { Form, Input, Select } from "antd";
//使用forwordRef来夸组件操作表单 后续优化方向是使用useImperativeHandle来将表单组件的自定义方法暴露出来
const FormInput = forwardRef(
  ({ optionRole, optionArea, isUpdateDisable }, ref) => {
    const [isDisable, setIsDisable] = useState(false);
    useEffect(() => {
      setIsDisable(isUpdateDisable);
      //使用useEffect理念 每次依赖项更新都会重新执行一次副作用
    }, [isUpdateDisable]);

    const [form] = Form.useForm();
    // 让外部 ref 访问 form 的方法
    useImperativeHandle(ref, () => ({
      validateFields: () => form.validateFields(),
      resetFields: () => form.resetFields(),
      setFieldsValue: (values) => form.setFieldsValue(values),
    }));
    //将最外层的dev去掉 避免validateFields无法找到表单

    //获取登录用户信息
    const {
      role: { id },
      region,
    } = JSON.parse(localStorage.getItem("token"));

    // 根据登录用户权限过滤区域选项 因为在antdv5版本中 要操selection的option 只能用filter直接操作数据源
    const getFilteredRegionOptions = () => {
      if (id === 1) {
        // 超级管理员：可以选择所有区域
        return optionArea;
      } else if (id === 2) {
        // 区域管理员：只能选择自己的区域
        return optionArea.filter((item) => item.value === region);
      } else {
        // 编辑：只能选择自己的区域
        return optionArea.filter((item) => item.value === region);
      }
    };

    // 根据登录用户权限过滤角色选项
    const getFilteredRoleOptions = () => {
      if (id === 1) {
        // 超级管理员：可以选择所有角色
        return optionRole;
      } else if (id === 2) {
        // 区域管理员：只能选择区域管理员角色
        return optionRole.filter((item) => item.roleName === "区域编辑");
      } else {
        // 编辑：只能选择自己当前角色
        return optionRole.filter((item) => item.value === id);
      }
    };

    return (
      <Form layout="vertical" form={form}>
        <Form.Item
          // name是将来拿到数据时候的key
          name="username"
          label="用户名"
          // rules中可以填写很多规则 诸如最大输入数 正则表达式等等
          rules={[{ required: true, message: "请输入用户名" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          // rules中可以填写很多规则 诸如最大输入数 正则表达式等等
          rules={[{ required: true, message: "请输入密码" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="region"
          label="区域"
          // rules中可以填写很多规则 诸如最大输入数 正则表达式等等
          rules={isDisable ? [] : [{ required: true, message: "请选择区域" }]}
        >
          <Select
            disabled={isDisable}
            style={{ width: "100%" }}
            options={getFilteredRegionOptions()}
          />
        </Form.Item>
        <Form.Item
          name="roleId"
          label="角色"
          rules={[{ required: true, message: "请选择角色" }]}
        >
          <Select
            // 监听角色选择 如果角色是超级管理员就禁用区域
            onChange={(value) => {
              // 现在value是数字id，超级管理员的id是1
              if (value === 1) {
                // 注意：value现在是单个值，不是数组
                setIsDisable(true);
                // 清空区域 防止数据出错
                ref.current.setFieldsValue({
                  region: "",
                });
              } else {
                setIsDisable(false);
              }
            }}
            // 移除 mode="tags" - 这不是标签输入模式
            style={{ width: "100%" }}
            options={getFilteredRoleOptions()}
          />
        </Form.Item>
      </Form>
    );
  }
);

export default FormInput;
